<template>
  <view class="pay">
    <!-- 1 收货地址 -->
    <view class="address u-p-20">
      <view class="address-btn u-flex u-row-center">
        <view class="address-detail" v-if="address">
          <view class="address-detail">{{ getAddress }}</view>
          <view class="address-user">
            <!-- 姓氏 -->
            <view class="user-name">{{ address.userName }}</view>
            <!-- 电话 -->
            <view class="tel-number">{{ address.telNumber }}</view>
          </view>
        </view>
        <u-button
          v-else
          shape="circle"
          type="error"
          plain
          size="medium"
          :custom-style="{ backgroundColor: '#fff!important' }"
          @click="handleGetAddress"
          >获取收货地址</u-button
        >
      </view>
    </view>

    <u-line color="#eee"></u-line>

    <!-- 2 已选商品 -->
    <view class="goods-list u-p-15">
      <view class="goods-list-title">已选商品</view>
      <view class="goods-list-content">
        <view
          class="cart-item"
          v-for="item in getAllCheckedTrue"
          :key="item.goods_id"
        >
          <!-- 2 图片 -->
          <view class="goods-img">
            <u-image
              :src="item.goods_small_logo"
              width="191rpx"
              height="191rpx"
            ></u-image>
          </view>
          <!-- 3 信息 -->
          <view class="goods-info">
            <!-- 名称 -->
            <view class="goods-name u-line-2">{{ item.goods_name }}</view>
            <!-- 价格和数量 -->
            <view class="goods-price-num">
              <view class="goods-price">￥{{ item.goods_price }}</view>
              <view class="goods-num-tool">
                <view class="goods-vnum">X{{ item.number }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 2 统计 -->
    <view class="statistics">
      <view class="all-price">
        合计: <text>￥{{ getTotalPrice }}</text>
      </view>
      <view class="all-count">
        <u-button type="error" shape="circle" @click="handleGoPay"
          >去支付({{ getTotalNum }})</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      address: null,
    };
  },
  computed: {
    ...mapState("user", ["token"]),
    ...mapGetters("cart", [
      "getAllCheckedTrue",
      "getTotalPrice",
      "getTotalNum",
    ]),
    // 计算属性，获得拼接后的地址
    getAddress() {
      if (!this.address) {
        return "";
      }
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },
  },
  methods: {
    ...mapActions("user", ["fetchToken"]),
    // 点击按钮获取用户地址信息
    async handleGetAddress() {
      const [err, res] = await uni.chooseAddress();
      this.address = res;
    },
    // 点击去支付按钮
    async handleGoPay() {
      if (!this.address) {
        uni.showToast({
          title: "请选择您的收货地址",
          icon: "none",
        });
      } else {
        // 获取token的逻辑挪到vuex中！！！
        // 如果没有token，就要调用vuex中的actions里的函数获取token
        if (!this.token) {
          // 因为actions中的函数是异步请求 所以要加async await
          await this.fetchToken();
        }

        //#region 2.获取订单编号，将token传递给后端，发起接口请求
        const ordersParams = {
          // 商品总价
          order_price: this.getTotalPrice,
          // 收货地址
          consignee_addr: this.getAddress,
          // 订单数组(需要使用map方法改造数组)
          goods: this.getAllCheckedTrue.map((item) => ({
            goods_id: item.goods_id,
            goods_number: item.number,
            goods_price: item.goods_price,
          })),
        };
        // console.log(ordersParams);
        const result3 = await this.$u.post(`/my/orders/create`, ordersParams);
        // console.log(result3);
        // 获取订单编号
        const { order_number } = result3.message;
        //#endregion

        //#region 3.获取支付参数 获得pay 是调用微信支付必备的参数
        const result4 = await this.$u.post(`/my/orders/req_unifiedorder`, {
          order_number,
        });
        const { pay } = result4.message;
        //#endregion

        //#region 4.调用微信支付的接口，传入pay
        const result5 = await uni.requestPayment(pay);
        //#endregion

        //#region 5.查询订单支付状态
        const result6 = await this.$u.post(`/my/orders/chkOrder`, {
          order_number,
        });
        const { message } = result6;
        //#endregion

        //#region 6.支付成功弹窗提醒
        uni.showToast({
          title: message,
          icon: "none",
        });
        //#endregion

        // 跳转页面
      }
    },
  },
};
</script>

<style lang="scss">
.pay {
  padding-bottom: 111rpx;

  .address-user {
    display: flex;
  }
}
.cart-item {
  display: flex;
  padding: 10rpx;
  border-bottom: 1rpx solid #ccc;

  .goods-img {
    flex: 2;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .goods-info {
    color: #666;
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .goods-name {
    }

    .goods-price-num {
      display: flex;
      justify-content: space-between;
      .goods-price {
        color: #eb4450;
      }

      .goods-num-tool {
        width: 140rpx;
        height: 40rpx;

        display: flex;
        justify-content: flex-end;

        .goods-vnum {
        }
      }
    }
  }
}
.statistics {
  position: fixed;
  background-color: #fff;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  border-top: 1rpx solid #ccc;
  display: flex;
  align-items: center;
  padding: 15rpx;
  .all-price {
    flex: 1;
    color: #666;
    text {
    }
  }

  .all-count {
  }
}
</style>